<template>
  <el-dialog :title="`${detail.id?'修改':'添加'}权限资源`" :visible.sync="dialogVisible" @opened="dialogOpen">
    <el-form ref="detailForm" :model="detail" label-width="80px" size="small">
      <el-row>
        <el-col :span="24">
          <el-form-item prop="name" label="资源名称">
            <el-input v-model="detail.name"/>
          </el-form-item>
          <el-form-item prop="name" label="资源URL">
            <el-input v-model="detail.url"/>
          </el-form-item>
          <el-form-item prop="name" label="图标ICON">
            <d2-icon-select v-model="detail.icon" :user-input="true" class="icon-select" style="width: 100%"/>
          </el-form-item>
          <el-form-item prop="type" label="资源类型">
            <!--            <el-select v-model="detail.type" placeholder="资源类型" style="width: 100%">-->
            <!--              <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id"/>-->
            <!--            </el-select>-->
            <el-radio-group v-model="detail.type">
              <el-radio v-for="item in typeList" :key="item.id" :label="item.id">{{item.name}}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item prop="name" label="启用">
            <el-tooltip :content="detail.visible==1?'启用':'停用'" placement="top">
              <el-switch v-model="detail.visible" active-color="#027BE3" inactive-color="#ccc" :active-value="1" :inactive-value="0"/>
            </el-tooltip>
          </el-form-item>
          <el-form-item prop="name" label="描述">
            <el-input v-model="detail.remark"/>
          </el-form-item>
          <el-form-item prop="name" label="所属资源">
            <tree-select ref="treeSelect" @change="changeParent"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item class="from-bnts">
        <el-button type="primary" :loading="loading" @click="submitData">保存</el-button>
        <el-button @click="dialogVisible=false">取消</el-button>
      </el-form-item>
    </el-form>

  </el-dialog>

</template>
<script>
  import memuApi from "@/api/system/menu";
  import TreeSelect from "../../comps/zhzf/tree-select";

  export default {
    name: "permissionDetail",
    components: {TreeSelect},
    data() {
      return {
        loading: false,
        dialogVisible: false,
        typeList: [
          {name: '按钮', id: 'op'},
          {name: '功能', id: 'func'},
          {name: '菜单', id: 'menu'}
        ],
        detail: {},
      };
    },
    methods: {
      async initPage(detail, treeList) {
        this.dialogVisible = true;
        this.detail = detail || {};
        this.treeList = treeList;

        //默认值
        // if (!this.detail.type) {
        //   this.detail.type = this.typeList[2].id;
        // }
      },
      dialogOpen() {
        let pn = this.detail.pname ? {name: this.detail.pname, id: this.detail.pid} : {};
        this.$refs.treeSelect.initPage(this.treeList, pn, [pn.id]);
      },
      changeParent(item) {
        this.detail.pid = item.id;
      },
      submitData() {
        this.$refs["detailForm"].validate(async valid => {
          if (!valid) {
            return;
          }
          this.loading = true;
          let method = this.detail.id ? memuApi.mod : memuApi.add;
          await method(this.detail);
          this.loading = false;
          this.dialogVisible = false;
          this.$emit("submit");
        });
      },
    }
  };
</script>

